<script setup>

</script>
<template>
  <div class="container">
    <div class="card">
      <router-view v-slot="{Component}">
        <transition name="el-fade-in-linear" mode="out-in">
          <component :is="Component" style="height: 100%"/>
        </transition>
      </router-view>
    </div>
  </div>
</template>

<style scoped>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* 如果要使容器垂直居中显示在整个页面，可以设置容器的高度为整个视口高度 */
}
.card {
  width: 400px;
  z-index: 1;
  background-color: var(--el-bg-color);
}
</style>